<template>
  <div>
    <div>
        <input type="text" name="" id="" :value="inputValue" @input="inputValueName">
        <button @click="addInput(inputValue)">添加</button>
    </div>

    <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

// 跟list有关系的方法
let listAllEffect  = () => {
    let list = reactive([]);
    // 点击添加
    let addInput = (value) => {
        list.push(value)
    }

    return {
        list,
        addInput
    }
}

// 跟input有关系的方法
let inputAllEffect = () => {
    let inputValue = ref('');

    // 输入框
    let inputValueName = (e) => {
        inputValue.value = e.target.value;
    }

    return {
        inputValue,
        inputValueName
    }
}


export default {
    setup() {
        let { list, addInput } = listAllEffect();
        let { inputValue, inputValueName } = inputAllEffect();
        
        return {
            inputValue,
            list,
            inputValueName,
            addInput
        }
    }
}
</script>

<style>

</style>